<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import userInfoC from './components/userInfo.vue';
  import pwdSettingC from './components/PwdSetting.vue';
  import googleSettingC from './components/GoogleSetting.vue';

  const value = ref(1);
  onMounted(() => {
    const google = localStorage.getItem('openGoogle');
    if (google === '1') {
      value.value = 3;
    }
  });
  const changeTab = () => {
    const google = localStorage.getItem('openGoogle');
    if (google === '1') {
      value.value = 3;
    }
  };
</script>

<template>
  <main>
    <a-tabs v-model:activeKey="value" @change="changeTab" tab-position="left">
      <a-tab-pane tab="个人信息" :key="1">
        <userInfoC />
      </a-tab-pane>
      <a-tab-pane tab="安全信息" :key="2">
        <pwdSettingC />
      </a-tab-pane>
      <a-tab-pane tab="谷歌绑定" :key="3">
        <googleSettingC />
      </a-tab-pane>
    </a-tabs>
  </main>
</template>

<style scoped lang="less">
  .ant-card + .ant-card {
    margin-top: 16px;
  }

  .blue-title {
    color: #40a9ff;
    font-weight: bold;
  }
</style>
